<template>
  <el-main>
    <h3>搜索到5条相关机构信息</h3>
    <div class="top">
      <div>
        <el-form>
          <el-form-item>
            <el-input v-model="formInline.user" placeholder="未审核" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.region" placeholder="审核状态">
              <el-option label="全部" value="shanghai" />
              <el-option label="编号" value="beijing" />
              <el-option label="机构名称" value="beijing" />
              <el-option label="机构级别" value="beijing" />
              <el-option label="省份" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- ======================表格======================== -->
    <div>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="num" label="编号" width="120" />
        <el-table-column property="name" label="机构名称" width="200" />
        <el-table-column property="rank" label="机构级别" />
        <el-table-column property="city" label="省份/市" />
        <el-table-column property="agent" label="经办人" />
        <el-table-column property="people" label="联系人" />
        <el-table-column property="status" label="审核状态" />
        <!-- =============================== -->
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-button
              size="small"
              type="check"
              @click="handleCheck(scope.$index, scope.row)"
              >查看</el-button
            >
          </template></el-table-column
        >
        <!-- ============================= -->
      </el-table>
    </div>
    <!-- ================================================== -->
  </el-main>
</template>

<script setup>
import { reactive, ref } from "vue";
const formInline = reactive({
  user: "",
  region: "",
});

const onSubmit = () => {
  console.log("submit!");
};
// ===========表格===================

import { ElTable } from "element-plus";

const multipleTableRef = ref();
const multipleSelection = ref();
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
const tableData = [
  {
    num: "100021",
    name: "武汉工业职业学院图书馆",
    rank: "学校",
    city: "福建省",
    agent: "陈满",
    people: "李雅琴",
    status: "未审核",
  },
  {
    num: "1000212",
    name: "山东工业职业学院图书馆",
    rank: "学校",
    city: "陕西省",
    agent: "陈满",
    people: "李雅琴",
    status: "已审核",
  },
  {
    num: "100023",
    name: "武汉工业职业学院图书馆",
    rank: "学校",
    city: "福建省",
    agent: "陈满",
    people: "李雅琴",
    status: "未审核",
  },
];
const handleEdit = (index, row) => {
  console.log(index, row);
};
const handleDelete = (index, row) => {
  console.log(index, row);
};
const handleCheck = (index, row) => {
  console.log(index, row);
};
// =====================================
</script>

<style lang='scss' scoped>
.el-main {
  padding: 0;
  margin: 0;
}
h3 {
  padding: 0;
  text-align: center;
}
.top {
  display: flex;
  justify-content: space-between;
  div {
    display: inline-block;
    span {
      display: inline-block;
    }
  }
}
.el-form-item {
  margin-right: 10px;
}
.el-table {
  text-align: center;
}
</style>